import React, { Component } from 'react';
import { observable } from 'mobx';
import { observer, inject } from "mobx-react";
import PropTypes from 'prop-types';
import { Button, Modal, message } from 'antd';
import FilterBar from './FilterBar/FilterBar';
import ChooseTips from '@/components/ChooseTips/ChooseTips';
import NewsPreview from '@/components/NewsPreview/NewsPreview'
import ReleasedTable from './ReleasedTable/ReleasedTable';
import http from '../../../../common/http';

const confirm = Modal.confirm;

@inject('rootStore') @observer
class Released extends Component {
  @observable selectedRowsLength = 0;
  @observable selectedRowKeys = [];
  @observable newsListDetails = {};
  @observable showPreviewModal = false;
  @observable previewId = 0;
  @observable categoryId = 0;

  toEdit = (id) => {
    const { history } = this.props;

    history.push(`/english/newsedit/${id}`)
  }

  toPreview = (record) => {
    this.categoryId = record.categoryId
    this.previewId = record.id
    this.newsListDetails = record;
    this.showPreviewModal = true
  }

  newsPrevieCancel = () => {
    this.showPreviewModal = false
  }

  pageOnChange = (pageNumber, pageSize) => {
    const newsStore = this.props.rootStore.newsStore;

    newsStore.toChangePageNumber(pageNumber)
  }

  pageSizeOnChange = (current, pageSize) => {
    const newsStore = this.props.rootStore.newsStore;

    newsStore.toChangePageSize(pageSize)
  }

  selectedRowsLengthChange = (length) => {
    this.selectedRowsLength = length
  }

  clearChooseTips = () => {
    this.selectedRowKeys = []
    this.selectedRowsLength = 0;
  }

  clearSelectRows = () => {
    this.selectedRowKeys = [];
    this.selectedRowsLength = 0;
  }

  showTopConfirm = (id, categoryId, props, that) => {
    const newsStore = this.props.rootStore.newsStore;
    if (this.newsListDetails.top) {
      confirm({
        title: 'Are you sure revoke this news?',
        content: 'You can reapprove it in unavailable list',
        okText: 'Confirm',
        cancelText: 'Cancel',
        centered: true,
        onOk() {
          const param = {
            id: id
          }

          http.post('/article/cancel', param)
          .then((response) => {
            if (response.success) {
              message.success('Success');
              newsStore.toGetNewsList();
              that.showPreviewModal = false;
              that.clearSelectRows();
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    } else {
      confirm({
        title: 'Are you sure top this news?',
        content: 'You can reapprove it in unavailable list',
        okText: 'Confirm',
        cancelText: 'Cancel',
        centered: true,
        onOk() {
          const param = {
            id: id,
            categoryId: categoryId
          }

          http.post('/article/top', param)
          .then((response) => {
            if (response.success) {
              message.success('Success');
              newsStore.toGetNewsList();
              that.showPreviewModal = false;
              that.clearSelectRows();
            }
          })
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  }

  showCancelTopConfirm = (id, props, that) => {
    const newsStore = this.props.rootStore.newsStore;
    confirm({
      title: 'Are you sure revoke this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          id: id
        }

        http.post('/article/cancel', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            newsStore.toGetNewsList();
            that.clearSelectRows();
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  showRemoveConfirm = (id, props, that) => {
    const newsStore = this.props.rootStore.newsStore;
    confirm({
      title: 'Are you sure remove this news?',
      content: 'You can reapprove it in unavailable list',
      okText: 'Confirm',
      cancelText: 'Cancel',
      centered: true,
      onOk() {
        const param = {
          ids: id
        }

        http.post('/article/offline', param)
        .then((response) => {
          if (response.success) {
            message.success('Success');
            newsStore.toGetNewsList();
            that.showPreviewModal = false;
            that.clearSelectRows();
          }
        })
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  showBatchRemoveConfirm = () => {
    const newsStore = this.props.rootStore.newsStore;
    const keys = this.selectedRowKeys.join()
    const that = this
    if (this.selectedRowKeys.length !== 0) {
      confirm({
        title: 'Are you sure remove these news?',
        content: 'You can reapprove it in unavailable list',
        okText: 'Confirm',
        cancelText: 'Cancel',
        centered: true,
        onOk() {
          const param = {
            ids: keys
          }

          http.post('/article/offline', param)
          .then((response) => {
            if (response.success) {
              message.success('Success');
              newsStore.toGetNewsList();
              that.clearSelectRows();
            }
          })
        },
        onCancel() {
        },
      });
    } else {
      message.warning('Please select at least one');
    }
  }

  static propTypes = {
    history: PropTypes.object.isRequired
  }

  render() {
    const selectedRowKeys = this.selectedRowKeys;
    const newsStore = this.props.rootStore.newsStore;

    const rowSelection = {
      selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.selectedRowKeys = selectedRowKeys;
        this.selectedRowsLength  = selectedRows.length;
      },
    };

    return (
      <div className="page-content mt176">
        <FilterBar
          filterBarSearch={this.props.filterBarSearch}
          titleValueOnChange={this.props.titleValueOnChange}
          titleValue={this.props.titleValue}
          timeOnChange={this.props.timeOnChange}
          timeChange={this.props.timeChange}
          timeValue={this.props.timeValue}
          filterBarReset={this.props.filterBarReset}
          categoryListFifty={this.props.categoryListFifty}
          activeItem={this.props.activeItem}
          categoryStatus={this.props.categoryStatus}
          toChangeCategoryStatus={this.props.toChangeCategoryStatus}
          toChooseCategory={(name, id) => this.props.toChooseCategory(name, id)}
        />
        <div className="list-table">
          <div className="config-btn-group">
            <Button
              type="primary"
              className="config-btn btn129"
              onClick={this.showBatchRemoveConfirm}>Batch Remove</Button>
          </div>
          <ChooseTips
            tipsNumber={this.selectedRowsLength}
            clearChooseTips={this.clearChooseTips} />
          <ReleasedTable
            toEdit={(id) => this.toEdit(id)}
            toPreview={(record) => this.toPreview(record)}
            top={(id, categoryId) => this.showTopConfirm(id, categoryId, this.props, this)}
            cancelTop={(id) => this.showCancelTopConfirm(id, this.props, this)}
            remove={(id) => this.showRemoveConfirm(id, this.props, this)}
            dataSource={newsStore.newsList}
            dataTotal={newsStore.newsListTotal}
            pageOnChange={this.pageOnChange}
            pageSizeOnChange={this.pageSizeOnChange}
            pageCurrent={newsStore.newsListParam.pageIndex}
            rowSelection={rowSelection}
          />
          <Modal
            title="News Preview"
            width={1165}
            visible={this.showPreviewModal}
            onCancel={this.newsPrevieCancel}
            footer={[
              <Button
                className="btn95"
                key="Remove"
                onClick={() => this.showRemoveConfirm(this.previewId, this.props, this)}>
                Remove
              </Button>,
              <Button
                className="btn95"
                key="Top"
                type="primary"
                onClick={() => this.showTopConfirm(this.previewId, this.categoryId, this.props, this)}>
                {
                  !this.newsListDetails.top ?
                  'Top' : 'Revoke'
                }
              </Button>,
              <Button
                className="btn95"
                key="Edit"
                type="primary"
                onClick={() => this.toEdit(this.previewId)}>Edit</Button>,
            ]}>
            <NewsPreview newsListDetails={this.newsListDetails} />
          </Modal>
        </div>
      </div>
    )
  }
}

export default Released;
